import { Button } from "antd";
import React, { Component } from "react";
import io from 'socket.io-client';

class TaskManage extends Component {
    constructor(props){
        super(props);
        this.state = {};
    }

    onWs = () => {
        const namespace = '/websocket/user_refresh'
        // const url = `http://${window.location.host}${namespace}`;
        const url = `http://127.0.0.1:5000${namespace}`;
        let socket = io(url)
        console.log(socket)
        socket.on('connect', function() { // 发送到服务器的通信内容
            socket.emit('connect_event', {data: '我已连接上服务端！'});
        });
        socket.on('server_response', function(msg) {
            //显示接受到的通信内容，包括服务器端直接发送的内容和反馈给客户端的内容
            console.log(msg);
        });
        socket.on('user_response', function(msg) {
            // 获取后端传过来的业务数据
            // const obj = eval(msg.data[0]);
            const obj = msg.data[0];
            console.log(obj);
        });
    }

    onWs2 = () => {
        const namespace = '/websocket/user_refresh'
        const url = `ws://127.0.0.1:5000${namespace}`;
        let socket = new WebSocket(url);
        console.log(socket)
        socket.onopen = () => {
            console.log('opened custom socket');
            socket.send('111')
        };
        socket.onmessage = (evt) => {
            console.log('got message' + evt)

        };
        socket.onclose = () => console.log('closed custom socket');
        socket.onerror = e => console.log('websocket error' + e)
    }

    render(){
        return (
            <div>
                <Button onClick={this.onWs}>测试websocket-socket.io</Button>
                <br></br>
                <Button onClick={this.onWs2}>测试websocket-js</Button>
            </div>
        )
    }
}
export default TaskManage;